<template>
  <div class="send-content-list">
    <div
      class="send-list"
      v-for="(item, index) in data.list"
      :key="index"
      @click="toJobDetails(item.jobId,item.companyId)"
    >
      <div class="send-list-top">
        <div class="send-list-top-name">
          <div>
            <!--          高级工程师-->
            <span class="doDetails">{{item.jobName}}</span>

            <span class="sub-name-color">
              <span v-if="item.tax == 0" style="color:#999;">税前</span>
              <span v-if="item.tax == 1" style="color:#999;">税后</span>
              {{item.salaryPerMonthLow ? item.salaryPerMonthLow : '---'}}-{{item.salaryPerMonthHigh ? item.salaryPerMonthHigh + 'W' : '---'}}
              <span
                style="font-size:12px;color:#999;"
              >/{{item.salaryCount}}年</span>
            </span>
            <el-popover placement="right" trigger="hover">
              <!-- <div class="sub-name-icon-consultant"> -->
              <job-consultant
                :job-id="item.jobId"
                :company-name="item.companyFullName"
                :job-name="item.jobName"
                :data="item.consultantDto"
              ></job-consultant>
              <!-- </div> -->
              <span class="sub-name-icon" slot="reference">
                <img src="../../assets/img/chip.png" alt />
              </span>
            </el-popover>
          </div>
          <div v-if="item.state==3">
            <span class="success-text" v-if="item.ensureState == 0" style="color:#409667">未过保</span>
            <span class="success-text" v-if="item.ensureState == 1" style="color:#F09338">已过保</span>
            <span class="success-text" v-if="item.ensureState == 2" style="color:#DD3A31">未过保已离职</span>
          </div>
          <el-button
            v-if="item.state==2"
            @click.stop="doEntry(item.jobId)"
            style="background: #f09338"
          >确认入职</el-button>
        </div>
        <div class="company-name">
          <span>{{item.companyFullName}}</span>
          <span style="margin:0 10px 0 10px;">|</span>
          <span>{{item.workCity}}</span>
        </div>
        <el-row>
          <el-col :span="13" class="send-money">自荐奖金:{{item.bonus ? item.bonus + 'K' : '---'}}</el-col>
          <el-col :span="7" class="send-time">{{item.deliveryTime}}</el-col>
          <el-col :span="4" style="cursor:pointer;" @click.stop.native="showStep(item.jobId)">
            <span
              v-for="(items, index) in staText"
              :key="index"
              v-if="item.state == index"
            >{{items.title}}</span>
            <i
              v-if="item.state != 4  && stepId != item.jobId"
              class="el-icon-caret-bottom icon-color"
            ></i>
            <i
              v-if="item.state != 4 &&  stepId == item.jobId "
              class="el-icon-caret-top icon-color"
            ></i>
          </el-col>
        </el-row>
      </div>
      <!--     进度条-->
      <div :class="stepId == item.jobId ? 'send-list-bottom' :'send-list-bottoms'">
        <el-steps :active="item.state + 1" align-center>
          <el-step
            :class="item.state +1 >= 2 ? 'send-step-line' : ''"
            title="投递中"
            description="您的简历已成功发出 请等待专属顾问与您沟通"
          ></el-step>
          <el-step
            :class="item.state +1 >= 3 ? 'send-step-line' : ''"
            title="投递成功"
            description="您的简历已投递成功 请等待企业发起沟通"
          ></el-step>
          <el-step
            :class="item.state +1 >= 4 ? 'send-step-line' : ''"
            title="待入职"
            description="您已接受企业入职邀请 请尽快入职"
          ></el-step>
          <el-step title="入职成功" description="面试通过，恭喜入职"></el-step>
        </el-steps>
      </div>
      <!--      进度条-->
    </div>
    <job-pagination :total="data.total" @hasPage="getPage"></job-pagination>
  </div>
</template>

<script>
import jobConsultant from '../../components/job-consultant'
import jobPagination from '../job/job-pagination'
export default {
  props: ['data'],
  data() {
    return {
      showConsultant: false,
      consultantIndex: -1,
      page: {
        currPageNo: 1,
        pageSize: 6
      },
      // ensureState:1, //未过保的sta
      stepIndex: 2, //步骤条
      activeIndex: 3, //投递状态
      stepId: -1,
      staText: [
        { title: '投递中' },
        { title: '投递成功' },
        { title: '待入职' },
        { title: '入职成功' },
        { title: '不合适' }
      ],
      staSuccess: [
        {
          title: '已过保'
        },
        {
          title: '未过保'
        },
        {
          title: '未过保已离职'
        }
      ]
    }
  },
  methods: {
    doshowConsultant(index) {
      if (this.consultantIndex == index) {
        this.showConsultant = !this.showConsultant
      } else {
        this.showConsultant = true
        this.consultantIndex = index
      }
    },
    getPage(val) {
      this.$emit('input', val)
      this.$emit('on-pitch', true)
    },
    showStep(id) {
      if (this.stepId == id) {
        this.stepId = -1
      } else {
        this.stepId = id
      }
      this.activeIndexs = !this.activeIndexs
    },
    doEntry(id) {
      _g.apiPost('/talent/jobToSuccess.do', { jobId: id }).then(res => {
        _g.toMessage(res)
        this.$emit('on-pitch', true)
      })
    },
    toJobDetails(jobId, companyId) {
      this.$router.push({
        path: '/job/details',
        query: { jobId: jobId, companyId: companyId }
      })
    }
  },
  components: {
    jobConsultant,
    jobPagination
  }
}
</script>

<style lang="scss" scoped>
.doDetails {
  &:hover {
    color: #f09338;
  }
}
</style>
